Part-18: User authentication, authorization and login using ASP.NET MVC AngularJS Javascript JQUERY

11/13/2021 12:33:34 PM

User authentication, authorization and login using ASP.NET MVC AngularJS Javascript JQUERY will be discussed here also you will learn how to login using Javascript passing value from form and save it from mvc.
Steps:

Step-1:

Modify GetLoginInfo() in HomeController.cs.
Go to Solution Explorer > Controllers Folder> Controller> HomeController > in this controller with writing the below highlight code.

        public JsonResult GetLoginInfo(UserDAO dao)
        {
            DataTable dt = aDal.LoadAllDataDAL(dao);
            string mes = "";
            if (dt.Rows.Count > 0)
            {
                Session["LoginName"] = dao.LoginName;
                mes = "Login Successfully";
            }
            else
            {
                mes = "Login Faild";

            }
            return Json(mes, JsonRequestBehavior.AllowGet);
         }

Step-2:

Modify LoadAllDataDAL() in UserDAL.css.
Go to Solution Explorer > DAL Folder> UserDAL.css > In this class with writing the below code.

       public DataTable LoadAllDataDAL(UserDAO dao)
        {
            SqlCommand com = new SqlCommand("sp_LoginInfo", conn);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@LoginName", dao.LoginName);
            com.Parameters.AddWithValue("@Password", dao.Password);
            SqlDataAdapter da = new SqlDataAdapter(com);
            DataTable dss = new DataTable();
            da.Fill(dss);
            return dss;
        }

Step-3:

Modify LoginPage.cshtml.
Go to Solution Explorer > Views Folder.>Home Folder> LoginPage.cshtml > with writing the below highlight code.

<body class="hold-transition login-page">



    <div ng-app="ABCApp" ng-controller="HomeController">
        <div class="login-box">
            <div class="login-logo">
                <a href="../../index2.html"><b>Admin</b>LTE</a>
            </div>
            <!-- /.login-logo -->
            <div class="card">
                <div class="card-body login-card-body">
                    <p class="login-box-msg">Sign in to start your session</p>

                    <form action="../../index3.html" method="post">
                        <div class="input-group mb-3">
                            <input  ng-model="UserDAO.LoginName" class="form-control" placeholder="Email">
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-envelope"></span>
                                </div>
                            </div>
                        </div>
                        <div class="input-group mb-3">
                            <input type="password" ng-model="UserDAO.Password" class="form-control" placeholder="Password">
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-lock"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-8">
                                <div class="icheck-primary">
                                    <input type="checkbox" id="remember">
                                    <label for="remember">
                                        Remember Me
                                    </label>
                                </div>
                            </div>
                            <!-- /.col -->
                            <div class="col-4">
                                <input type="button" ng-click="LoginData()" class="btn btn-primary" value="{{btnLogin}}" />

                            </div>
                            <!-- /.col -->
                        </div>
                    </form>

                    <div class="social-auth-links text-center mb-3">
                        <p>- OR -</p>
                        <a href="#" class="btn btn-block btn-primary">
                            <i class="fab fa-facebook mr-2"></i> Sign in using Facebook
                        </a>
                        <a href="#" class="btn btn-block btn-danger">
                            <i class="fab fa-google-plus mr-2"></i> Sign in using Google+
                        </a>
                    </div>
                    <!-- /.social-auth-links -->

                    <p class="mb-1">
                        <a href="forgot-password.html">I forgot my password</a>
                    </p>
                    <p class="mb-0">
                        <a href="register.html" class="text-center">Register a new membership</a>
                    </p>
                </div>
                <!-- /.login-card-body -->
            </div>
        </div>
    </div>
    <!-- /.login-box -->
    <!-- jQuery --> 
    <!-- Bootstrap 4 -->
    <script src="~/Content/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="~/Content/dist/js/adminlte.min.js"></script>

    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/AngularController/HomeControllerJS.js"></script>
</body>
</html>

Step-4:

Modify _Layout.cshtml for get Login User Session.
Go to Solution Explorer > Views Folder.> _Layout.cshtml > with writing the below highlight code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>


    @Scripts.Render("~/bundles/modernizr")
    <!-- Font Awesome -->
    <link rel="stylesheet" href="~/Content/plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Tempusdominus Bbootstrap 4 -->
    <link rel="stylesheet" href="~/Content/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="~/Content/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- JQVMap -->
    <link rel="stylesheet" href="~/Content/plugins/jqvmap/jqvmap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="~/Content/dist/css/adminlte.min.css">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="~/Content/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="~/Content/plugins/daterangepicker/daterangepicker.css">
    <!-- summernote -->
    <link rel="stylesheet" href="~/Content/plugins/summernote/summernote-bs4.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
    <div class="wrapper">
        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light">
            <!-- Left navbar links -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
                </li>
                <li class="nav-item d-none d-sm-inline-block">
                    <a href="index3.html" class="nav-link">Home</a>
                </li>
                <li class="nav-item d-none d-sm-inline-block">
                    <a href="#" class="nav-link">Contact</a>
                </li>
            </ul>
            <!-- SEARCH FORM -->
            <form class="form-inline ml-3">
                <div class="input-group input-group-sm">
                    <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
                    <div class="input-group-append">
                        <button class="btn btn-navbar" type="submit">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </form>
            <!-- Right navbar links -->
            <ul class="navbar-nav ml-auto">
                <!-- Messages Dropdown Menu -->
                <li class="nav-item dropdown">
                    <a class="nav-link" data-toggle="dropdown" href="#">
                        <i class="far fa-comments"></i>
                        <span class="badge badge-danger navbar-badge">3</span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                        <a href="#" class="dropdown-item">
                            <!-- Message Start -->
                            <div class="media">
                                <img src="~/Content/dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
                                <div class="media-body">
                                    <h3 class="dropdown-item-title">
                                        Brad Diesel
                                        <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
                                    </h3>
                                    <p class="text-sm">Call me whenever you can...</p>
                                    <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                                </div>
                            </div>
                            <!-- Message End -->
                        </a>
                        <div class="dropdown-divider"></div>
                        <a href="#" class="dropdown-item">
                            <!-- Message Start -->
                            <div class="media">
                                <img src="~/Content/dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
                                <div class="media-body">
                                    <h3 class="dropdown-item-title">
                                        John Pierce
                                        <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
                                    </h3>
                                    <p class="text-sm">I got your message bro</p>
                                    <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                                </div>
                            </div>
                            <!-- Message End -->
                        </a>
                        <div class="dropdown-divider"></div>
                        <a href="#" class="dropdown-item">
                            <!-- Message Start -->
                            <div class="media">
                                <img src="~/Content/dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
                                <div class="media-body">
                                    <h3 class="dropdown-item-title">
                                        Nora Silvester
                                        <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
                                    </h3>
                                    <p class="text-sm">The subject goes here</p>
                                    <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                                </div>
                            </div>
                            <!-- Message End -->
                        </a>
                        <div class="dropdown-divider"></div>
                        <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
                    </div>
                </li>
                <!-- Notifications Dropdown Menu -->
                <li class="nav-item dropdown">
                    <a class="nav-link" data-toggle="dropdown" href="#">
                        <i class="far fa-user"></i>&#160; @Session["LoginName"]

                    </a>
                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                        
                        
                         
                        
                        <a href="../Home/LoginPage" class="dropdown-item dropdown-footer">Log Out</a>
                    </div>
                </li>
               
            </ul>
        </nav>
        <!-- /.navbar -->
        <!-- Main Sidebar Container -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4">
            <!-- Brand Logo -->
            <a href="index3.html" class="brand-link">
                <img src="~/Content/dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
                     style="opacity: .8">
                <span class="brand-text font-weight-light">AdminLTE 3</span>
            </a>
            <!-- Sidebar -->
            <div class="sidebar">
                <!-- Sidebar user panel (optional) -->
                <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                    <div class="image">
                        <img src="~/Content/dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
                    </div>
                    <div class="info">
                        <a href="#" class="d-block">@Session["LoginName"]</a>
                    </div>
                </div>
                <!-- Sidebar Menu -->
                <nav class="mt-2">
                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                        <!-- Add icons to the links using the .nav-icon class
        with font-awesome or any other icon font library -->
                        <li class="nav-item has-treeview menu-open">
                            <a href="#" class="nav-link active">
                                <i class="nav-icon fas fa-tachometer-alt"></i>
                                <p>
                                    Master Setup
                                    <i class="right fas fa-angle-left"></i>
                                </p>
                            </a>
                            <ul class="nav nav-treeview">
                                <li class="nav-item">
                                    <a href="../Batch/ListView" class="nav-link active">
                                        <i class="far fa-circle nav-icon"></i>
                                        <p>Batch Name </p>
                                    </a>
                                </li>

                            </ul>


                            <ul class="nav nav-treeview">
                                <li class="nav-item">
                                    <a href="../Section/SectionList" class="nav-link active">
                                        <i class="far fa-circle nav-icon"></i>
                                        <p>Section Name </p>
                                    </a>
                                </li>

                            </ul>


                            <ul class="nav nav-treeview">
                                <li class="nav-item">
                                    <a href="../Course/CourseListView" class="nav-link active">
                                        <i class="far fa-circle nav-icon"></i>
                                        <p>Course Name </p>
                                    </a>
                                </li>

                            </ul>
                        </li>

                        <li class="nav-item has-treeview menu-open">
                            <a href="#" class="nav-link active">
                                <i class="nav-icon fas fa-tachometer-alt"></i>
                                <p>
                                   Student Information
                                    <i class="right fas fa-angle-left"></i>
                                </p>
                            </a>
                            <ul class="nav nav-treeview">
                                <li class="nav-item">
                                    <a href="../Student/StudentList" class="nav-link active">
                                        <i class="far fa-circle nav-icon"></i>
                                        <p>Student List </p>
                                    </a>
                                </li>

                            </ul>
                        </li>
                    </ul>
                   
                </nav>
                <!-- /.contacts-list -->
            </div>

        </aside>
        <!-- /.direct-chat-pane -->
    </div>


   
                <!-- Small boxes (Stat box) -->
              
                    @RenderBody()
                    <hr />

              

          
                <!-- jQuery -->
                <script src="~/Content/plugins/jquery/jquery.min.js"></script>
                <!-- jQuery UI 1.11.4 -->
                <script src="~/Content/plugins/jquery-ui/jquery-ui.min.js"></script>
                <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
                <script>
                    $.widget.bridge('uibutton', $.ui.button)
                </script>
                <!-- Bootstrap 4 -->
                <script src="~/Content/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
                <!-- ChartJS -->
                <script src="~/Content/plugins/chart.js/Chart.min.js"></script>
                <!-- Sparkline -->
                <script src="~/Content/plugins/sparklines/sparkline.js"></script>
                <!-- JQVMap -->
                <script src="~/Content/plugins/jqvmap/jquery.vmap.min.js"></script>
                <script src="~/Content/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
                <!-- jQuery Knob Chart -->
                <script src="~/Content/plugins/jquery-knob/jquery.knob.min.js"></script>
                <!-- daterangepicker -->
                <script src="~/Content/plugins/moment/moment.min.js"></script>
                <script src="~/Content/plugins/daterangepicker/daterangepicker.js"></script>
                <!-- Tempusdominus Bootstrap 4 -->
                <script src="~/Content/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
                <!-- Summernote -->
                <script src="~/Content/plugins/summernote/summernote-bs4.min.js"></script>
                <!-- overlayScrollbars -->
                <script src="~/Content/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
                <!-- AdminLTE App -->
                <script src="~/Content/dist/js/adminlte.js"></script>
                <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
                <script src="~/Content/dist/js/pages/dashboard.js"></script>
                <!-- AdminLTE for demo purposes -->
                <script src="~/Content/dist/js/demo.js"></script>
</body>

</html>

Step-5:

In HomeController.cs class add GetLoginInfo() JsonResult for Login.
Go to Solution Explorer > Controllers Folder > HomeController.cs in this controller with writing the below code.

        public JsonResult GetLoginInfo(UserDAO dao)
        {
            DataTable dt = aDal.LoadAllDataDAL(dao);

            string mes = "";

            if (dt.Rows.Count > 0)
            {
                Session["LoginName"] = dao.LoginName;
                mes = "Login Successfully";
            }
            else
            {
                mes = "Login Faild";

            }
            return Json(mes, JsonRequestBehavior.AllowGet);
        }

Step-6:

Create Controller UserInfoController.cs.
Go to Solution Explorer > Controllers Folder> Add > Controller> Select MVC 5 Controller-Empty> Click ‘Add’ button> Give Controller Name ’ UserInfoController.css’ > in this controller with writing the below code.

       public ActionResult UserRegistrationList()
        {
            return View();
        }

In the UserRegistrationList() Action Result Mouse right button Select Add View > Click Add Button> UserRegistrationList.cshtml page has been created.

Add Another Action result SectionEntry()with writing the below code.

        public ActionResult UserRegistration()
        {
            return View();
        }

In the UserRegistration() Action Result Mouse right button Select Add View > Click Add Button> UserRegistration.cshtml page has been created.

Step-7:

UserRegistrationList.cshtml page with writing the below code.


<div ng-app="ABCApp" ng-controller="UserInfoController">
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">User List</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../UserInfo/UserRegistration">Add New Info</a></li>

                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">

               

                <div class="row">

                    <div class="col-md-12">

                        <table class="table table-responsive">
                            <tr>
                                <td>SL#</td>
                                <td>User Name</td>
                                <td>Login Name</td>
                                <td>Password</td>
                                <td>UserType</td>
                                <td>Active Status</td>
                                
                            </tr>
                            <tr ng-repeat="e in UserInfo" ng-class-even="'even'" ng-class-odd="'odd'">
                                <td>{{e.SL}}</td>
                                <td>{{e.UserName}}</td>
                                <td>{{e.LoginName}}</td>
                                <td>{{e.Password}}</td>

                                <td>{{e.UserType}}</td>

                                <td>{{e.ActiveStatus}}</td>


                                
                            </tr>
                        </table>


                    </div>
                </div>





            </div>
        </section>
    </div>
</div>
<script src="~/Scripts/angular.min.js"></script> 
<script src="~/Scripts/AngularController/UserInfoControllerJS.js"></script>

Step-8:

Create UserInfoControllerJS.js file.
Go to Solution Explorer > Scripts Folder.> AngularController Folder> Create ‘UserInfoControllerJS.js> for load User Information with writing the below code.

var MyApp = angular.module("ABCApp", []);

MyApp.controller("UserInfoController", function ($scope, $http) {
$http.get("/UserInfo/LoadData").then(function (d) {

        $scope.UserInfo = d.data;
    }, function (error) {
        alert("Faild");
    });
});

Step-9:

In UserInfoController.cs class add LoadData() JsonResult for Load User List.
Go to Solution Explorer > Controllers Folder > UserInfoController.cs in this controller with writing the below code.

       public JsonResult LoadData()
        {

            DataSet ds = aDal.LoadAllDataDAL();
            List<UserDAO> lists = new List<UserDAO>();
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                lists.Add(new UserDAO
                {
                    UserId = Convert.ToInt32(dr["UserId"]),
                    SL = (dr["SL"].ToString()),
                    UserName = (dr["UserName"].ToString()),
                    LoginName = (dr["LoginName"].ToString()),
                    Password = (dr["Password"].ToString()),
                    UserType = (dr["UserType"].ToString()),
                    ActiveStatus = Convert.ToBoolean(dr["ActiveStatus"].ToString())



                });

            }

            return Json(lists, JsonRequestBehavior.AllowGet);
        }

Step-10:

Create UserInfoDAL.cs class.
Go to Solution Explorer > DAL Folder > UserInfoDAL.cs Class with writing the below code.

SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConStr"].ConnectionString);
        public DataSet LoadAllDataDAL()
        {
            SqlCommand com = new SqlCommand("sp_LoadAllData_UserInfo", conn);
            com.CommandType = CommandType.StoredProcedure;
            SqlDataAdapter da = new SqlDataAdapter(com);
            DataSet dss = new DataSet();
            da.Fill(dss);
            return dss;
        }

Step-11:

Create UserDAO.cs class.
Go to Solution Explorer > DAO Folder > UserDAO.cs Class with writing the below code.

     public class UserDAO
    {
        public int UserId { get; set; }
        public string UserName { get; set; }
        public string SL { get; set; }
        public string LoginName { get; set; }
        public string Password { get; set; }
        public string UserType { get; set; }
        public int StudentId { get; set; }
        public bool ActiveStatus { get; set; }
    }

Step-12:

Create store Procedure for Course Get One Record.
Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_LoadAllData_UserInfo with writing the below code.

Step-12: Create store Procedure for Course Get One Record.
Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_LoadAllData_UserInfo   with writing the below code.
create proc [dbo].[sp_LoadAllData_UserInfo]
as 
begin
select ROW_NUMBER() over (order by userId) as SL, * from tblUser

end

Step-13: Run Application.

About Teacher

Reza Karim

Software Engineer

More about him

Comments

Save Reset

{{data.CreatedOn}} {{data.ProfileName}}

reply

{{item.CreatedOn}} {{item.ProfileName}}

SMS-27: Student profile create and browse profile using Store procedure AngularJS Jquery ASP.NET

SMS-28: Student Result show by search trimester and myasp server registration and login using Jquery & Angular js in ASP.NET MVC

SMS-26: Student Marks list show by search student name and trimester Jquery & Angular js in ASP.NET MVC

SMS-25: Student Course Mark multiple data save using jquery with Stored Procedure & Angular js in ASP.NET MVC

0 Comments

AngularJS

27 Articles